<template>
    <div>
        <NavBar />
        <div>
            <el-menu>
                <el-menu-item>
                    <img src="../assets/serviceCenterADPic.png" alt="广告" class="advertisement">
                </el-menu-item>
            </el-menu>
        </div>
        <div class="core-service">
            <el-row>
                <el-button round type="primary" @click="goMaintainService" class="maintainButton">维修服务</el-button>
                <el-button round type="primary" @click="goComplaintService" class="complaintButton">客服投诉</el-button>
                <el-button round type="primary" @click="goMessage" class="messageButton">客服留言</el-button>
            </el-row>
            <div class="announcement">
                <b>公告</b>
                <br>
                <br>
                <textarea>其他功能敬请期待，欢迎广大网友留言</textarea>
                <label>2024-11-11</label>
            </div>
        </div>
        <div class="self-service-area">
            <h1><b>自助专区</b></h1>
            <el-row>
                <el-button round type="primary" @click="goMaintainService" class="self-service-area-row1-col1">话费查询</el-button>
                <el-button round type="primary" @click="goComplaintService" class="self-service-area-row1-col2">话费充值</el-button>
                <el-button round type="primary" @click="goMessage" class="self-service-area-row1-col3">套餐查询</el-button>
                <el-button round type="primary" @click="goComplaintService" class="self-service-area-row1-col4">购买套餐</el-button>
                <el-button round type="primary" @click="goMessage" class="self-service-area-row2-col1">历史账单</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
// import axios from 'axios';

export default{
    name: 'homeUserService',
    components: {
        NavBar
    },
    methods: {
        goMaintainService() {
            this.$router.push({path:'/maintainService'});
        },
        goComplaintService() {
            this.$router.push({path:'/complaintService'});
        },
        goMessage() {
            this.$router.push({path:'/messageService'});
        },
    }
}
</script>

<style>
    .advertisement{
        margin: 7% 0 0 15%;
        width: 40%;
    }
    .core-service{
        margin: 3% 15% 0 56%;
        height: 362px;
        border: 1px solid rgb(228, 227, 227);
    }
    .maintainButton{
        position:absolute;
        margin-top:5%;
        left:7%;
        width:40%;
    }
    .complaintButton{
        position:absolute;
        margin-top:5%;
        left:50%;
        width:40%;
    }
    .messageButton{
        position:absolute;
        margin-top:20%;
        left:5%;
        width:40%;
    }
    .announcement{
        margin:35% 20% 0 8%;
    }
    .announcement b{
        font-size:20px;
    }
    .announcement textarea{
        width: 47vh;
        height: 18vh;
        resize: none;
        border: none;
    }
    .announcement label{
        position: absolute;
        bottom: 40vh;
        right: 37vh;
        font-size: 13px;
        color: #7d7d7d;
    }
    .self-service-area{
        position: absolute;
        margin: 0 15% 0 16%;
        bottom: 0;
        width: 68%;
        height: 30vh;
        border: 1px solid rgb(228, 227, 227);
    }
    .self-service-area h1 b{
        margin-left:4%;
    }
    .self-service-area-row1-col1{
        position: absolute;
        top: 1vh;
        left: 3%;
        width: 20%;
    }
    .self-service-area-row1-col2{
        position: absolute;
        top: 1vh;
        left: 26%;
        width: 20%;
    }
    .self-service-area-row1-col3{
        position: absolute;
        top: 1vh;
        left: 50%;
        width: 20%;
    }
    .self-service-area-row1-col4{
        position:absolute;
        top: 1vh;
        left:74%;
        width:20%;
    }
    .self-service-area-row2-col1{
        position:absolute;
        top: 11vh;
        left:2%;
        width:20%;
    }
</style>